import React, { Suspense } from "react";
import { Menu, Button, Layout } from "antd";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AreaChartOutlined,
} from "@ant-design/icons";
import { Switch, Route, Link, BrowserRouter as Router } from "react-router-dom";
import { router } from "./router";
import store from "./store";
import { Provider } from "react-redux";
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
class App extends React.Component<any, any> {
  state = {
    collapsed: false,
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Provider store={store}>
        <div>
          <Suspense fallback={<>loading...</>}>
            {" "}
            <Layout>
              <Router>
                <Sider
                  trigger={null}
                  collapsible
                  theme="light"
                  collapsed={this.state.collapsed}
                >
                  <Menu
                    defaultSelectedKeys={["10"]}
                    defaultOpenKeys={["sub1"]}
                    mode="inline"
                    inlineCollapsed={this.state.collapsed}
                  >
                    {router.map((r, i: number) => {
                      if (r.children) {
                        return (
                          <SubMenu key={r.id} icon={r.icon} title={r.title}>
                            {r.children.map((el, index: number) => {
                              return (
                                <Menu.Item key={el.id}>
                                  <Link to={el.path + "/1"}>
                                    {el.icon}
                                    {el.title}
                                  </Link>
                                </Menu.Item>
                              );
                            })}
                          </SubMenu>
                        );
                      } else {
                        return (
                          <Menu.Item key={r.id} icon={r.icon}>
                            <Link to={r.path}>{r.title}</Link>
                          </Menu.Item>
                        );
                      }
                    })}
                  </Menu>
                </Sider>
                <Layout className="site-layout">
                  <Header
                    className="site-layout-background"
                    style={{
                      padding: "0 40px 0 0",
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      backgroundImage:
                        "linear-gradient(to right,#f0f0f0, #3f5dca)",
                    }}
                  >
                    <Button
                      onClick={this.toggleCollapsed}
                      style={{ marginLeft: 16 }}
                    >
                      {React.createElement(
                        this.state.collapsed
                          ? MenuUnfoldOutlined
                          : MenuFoldOutlined
                      )}
                    </Button>
                    <AreaChartOutlined
                      style={{ fontSize: "30px", color: "rgb(26, 46, 189)" }}
                    />
                    <div>
                      <span
                        style={{
                          fontSize: "20px",
                          color: "#5bf7e8",
                          marginRight: "10px",
                        }}
                      >
                        Sensors Hcl
                      </span>
                    </div>
                  </Header>
                  <Content
                    className="site-layout-background"
                    style={{
                      margin: "24px 16px",
                      background: "white",
                      border: "1px solid gainsboro",
                      borderRadius: "5px",
                      padding: 24,
                      minHeight: 280,
                    }}
                  >
                    {router.map((el, i) => {
                      if (el.children) {
                        return (
                          // <Route path={el.path} exact={el.exact} key={el.id}>
                          //   {el.component}
                          <Switch key={el.id}>
                            {el.children.map((item, index) => {
                              return (
                                <Route path={item.path} key={item.id}>
                                  {item.component}
                                </Route>
                              );
                            })}
                          </Switch>
                          // </Route>
                        );
                      } else {
                        return (
                          <Route
                            path={el.path}
                            exact={el.exact === true}
                            key={el.id}
                          >
                            {el.component}
                          </Route>
                        );
                      }
                    })}
                  </Content>
                </Layout>
              </Router>
            </Layout>
          </Suspense>
        </div>
        {/* <Router>
          <ul>
            <li>
              <Link to={"/"}>home</Link>
            </li>
            <li>
              <Link to={"/study"}>study</Link>
            </li>
            <li>
              
              <Link to={"/login"}>login</Link>
            </li>
            <li>
              <Link to={"/about"}>about</Link>
            </li>
            <li>
              <Link to={"/user"}>
                user
                <ul>
                  <li>
                    <Link to={"/user/list"}>user list</Link>
                  </li>
                  <li>
                    <Link to={"/user/detail"}>user detail</Link>
                  </li>
                </ul>
              </Link>
            </li>
          </ul>
          <Switch>
            <Route path={"/"} exact>
              <Home />
            </Route>
            <Route path={"/study"} exact>
              <Study />
            </Route>
            <Route path={"/about"} exact>
              <About />
            </Route>
            <Route path={"/user"} exact>
              <User />
            </Route>
          </Switch>
          <Route path={"/login"} exact>
            <Login />
          </Route>
        </Router> */}
        {/* <OneList /> */}
      </Provider>
    );
  }
}

export default App;
